<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		
	<body>
		<div id="div1" style="width: 100px ;height: 100px; border: aqua solid 1px;">div1</div>
		<div id="div2" onclick="one()" style="width: 100px ;height: 100px; border: red solid 1px;">div2</div>
		<div id="div3" style="width: 100px ;height: 100px; border: blue solid 1px;">div3</div>
		
		<div id="div4" style="width: 300px ;height: 300px; border: aqua solid 1px;" onmouseenter="onEnter();" onmouseleave="onleave();" onmousemove="onmove();">div4</div>
		<div id="div5" onclick="one1()" style="width: 300px ;height: 300px; border: skyblue solid 1px;" onmouseenter="onEnter1();" onmouseleave="onleave1();" onmousemove="onmove1();">div5</div>
		<div id="div6"  style="width: 300px ;height: 300px; border: greenyellow solid 1px;" >div6</div>
		
		<form action="" method="post">
			用户名：<input type="text" name="" id="div7" value="" onfocus="focus1();" onblur="blur1();"/><br/>
			密码：<input type="text" name="" id="div8" value="" onfocus="focus2();" onblur="blur2();"/><br/>
			<button type="submit" onblur='blur3();' id="div9">提交</button>
		</form>
		
		<div id="div1.0" style="width: 300px;height: 300px;border: 1px solid red;">
			div1.0内容
		</div>
		
		<button type="button" id="say">打印hello world</button>
		<button type="button" onclick="addListener();">添加监听器</button>
		<button type="button" onclick="removeListener();">移除监听器</button>
	</body>
	<script type="text/javascript">
		//		1.按钮和DIV的单击事件（三种绑定方式）
		document.getElementById('div1').onclick =function()
		{
			console.log("单机点击一次div1");
		};
		
		function one()
		{
			console.log('单机点击一次div2');
		};
		//监听函数的绑定方式
		document.getElementById('div3').addEventListener('click',function()
		{
			console.log('单机点击一次div3');
		})
		
		//		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		//第一种绑定方式
		document.getElementById('div4').onclick =function()
		{
			console.log('单机点击一次div4');
		}
		document.getElementById('div4').onEnter =function()
		{
			console.log('进入div4');
		}
		document.getElementById('div4').onleave =function()
		{
			console.log('离开div4');
		}
		document.getElementById('div4').onmove =function()
		{
			console.log('移动div4');
		}
		//第二种绑定方式
		function one1()
		{
			console.log('单机点击一次div5')
		}
		function onEnter1()
		{
			console.log('进入div5')
		}
		function onleave1()
		{
			console.log('离开div5')
		}
		function onmove1()
		{
			console.log('移动div5')
		}
		//第三种绑定方式
		document.getElementById('div6').addEventListener('click',function()
		{
			console.log('单机点击一次div6');
		});
		document.getElementById('div6').addEventListener('mouseenter',function()
		{
			console.log('进入div6');
		});
		document.getElementById('div6').addEventListener('mouseleave',function()
		{
			console.log('离开div6');
		})
		document.getElementById('div6').addEventListener('mousemove',function()
		{
			console.log('移动div6');
		})
		
		
		
		
		//		3.登入页面
		//		用户名输入框，
		//		密码输入框，
		//		提交按钮
		//		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
			//	3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
			//	3.3  密码框获取焦点事件，控制台输出：用户在输入密码
			//	3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
			//	3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
			//	密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
			
		function focus1()
		{
			console.log('用户在输入名称');
		}
		
		function blur1()
		{
			var blur =document.getElementById('div7');
			if(blur.value !='')
			{
				console.log('用户名填写完毕！');
			}
			else
			{
				alert('没有输入用户名');
			}		
		}
		function focus2()
		{
			console.log('用户在输入密码');
		}
		
		function blur2()
		{
			var blu =document.getElementById('div8');
			if(blu.value !='')
			{
				console.log('密码填写完毕！');
			}
			else
			{
				alert('没有输入密码');
			}	
		}
		function blur3()
		{
			var blur =document.getElementById('div7');
			var blu =document.getElementById('div8');
			//var bl =document.getElementById('div9');
			if(blur.value =='')
			{
				alert('用户名为空')
			}
			if(blu.value =='')
			{
				alert('密码为空')
			}
			//if(bl.value =='' && bl.value =='')
			//{
			//	alert('用户名和密码都为空')
			//}
		}
		
		//	4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。*/
		function sayhello()
		{
			console.log('hello world');
		}
		function addListener()
		{
			document.getElementById('say').addEventListener('click',sayhello);
		}
		function removeListener()
		{
			document.getElementById('say').removeEventListener('click',sayhello);
		}
		
	</script>
</html>
